<template>
	<view class="searchWarp">
		<!-- 搜索区域开始 -->
		<view class="search">
			<u-search placeholder="搜日记 搜话题 搜人" :show-action="true" action-text="取消"></u-search>
		</view>
		<!-- 搜索区域结束 -->
		<!-- 内容区域开始 -->
		<view class="searchContent">
			<!-- tag标签区域 -->
			<view class="seachTag">
				<u-tabs font-size="24" height="60" bar-height="4" :list="list" :is-scroll="false" :current="current"
					@change="change"></u-tabs>
			</view>
			<!-- 推荐区域内容 -->
			<view class="recommend" >
				<view class="recommendTabs" v-show="current===0">
					<u-tabs inactive-color="#d1d1d1" font-size="32" :active-item-style="activeStyle" :show-bar="false"
						:list="recommendList" :is-scroll="false" :current="recommendCurrent" @change="recommendChange">
					</u-tabs>
				</view>
				<view class="recommendContent" v-show="current===0">
					<!-- <commonContent v-for="item in 3" :key="item"></commonContent> -->
					<commonBox :content="item.content" :imgUrl="item.imgUrl" :userAvatar="item.userAvatar" :headerShow="true" v-for="(item,index) in logData" :key="index"></commonBox>
				</view>
				<!-- 话题内容开始 -->
				<view class="gambitContainer" v-show="current===1">
					<view class="gambitItem" v-for="(item,index) in 3" :key="index">
						<view class="itemLeft">
							<view class="itemTag">
								<text>#</text>
							</view>
							<view class="itemTitle">
								<text>学习心得</text>
							</view>
						</view>
						<view class="itemRight">
							<text>日记 15</text>
						</view>
					</view>
				</view>
				<!-- 话题内容结束 -->
				<!-- 人内容开始 -->
				<view class="personContainer" v-show="current===2">
					<view class="personItem" v-for="(item,index) in 3" :key="index">
						<view class="itemAvatar">
							<image src="../../../static/jzqIcon/user1.png" mode=""></image>
						</view>
						<view class="personInfo">
							<view class="personlName">
								<text>Kuder测评</text>
							</view>
							<view class="personlGz">
								<text>1人关注</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 人内容结束 -->
			</view>
		</view>
		<!-- 内容区域结束 -->
		<!-- 发布按钮 -->
		<view class="fabu" v-show="current===0">
			<view class="fabuImg">
				<image src="../../../static/jzqIcon/fabuIcon.png" mode=""></image>
			</view>
			<view class="fabuTitle">
				<text>发布</text>
			</view>
		</view>
	</view>
</template>

<script>
	import commonContent from "../../../components/commonLogContainer"
	import commonBox from "../../../components/commonLogBox"
	export default {
		components: {
			commonContent,
			commonBox
		},
		data() {
			return {
				logData:[
					{
						userAvatar:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201206%2F16%2F20120616174342_ycsye.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629033721&t=8d89e4d09b79340b58bede7fc0e96449",
						content:'看书是我的最爱，它增长了我的知识，开阔了我的视野，使我懂得了更多的道理。有一次老师布置了一篇写含羞草的作文，由于我平时看书对含羞...查看全部',
						imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201206%2F16%2F20120616174342_ycsye.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629033721&t=8d89e4d09b79340b58bede7fc0e96449",
					},
					{
						userAvatar:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201206%2F16%2F20120616174342_ycsye.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629033721&t=8d89e4d09b79340b58bede7fc0e96449",
						content:'看书是我的最爱，它增长了我的知识，开阔了我的视野，使我懂得了更多的道理。有一次老师布置了一篇写含羞草的作文，由于我平时看书对含羞...查看全部',
						imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201206%2F16%2F20120616174342_ycsye.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629033721&t=8d89e4d09b79340b58bede7fc0e96449",
					},
					{
						userAvatar:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201206%2F16%2F20120616174342_ycsye.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629033721&t=8d89e4d09b79340b58bede7fc0e96449",
						content:'看书是我的最爱，它增长了我的知识，开阔了我的视野，使我懂得了更多的道理。有一次老师布置了一篇写含羞草的作文，由于我平时看书对含羞...查看全部',
						imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201206%2F16%2F20120616174342_ycsye.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629033721&t=8d89e4d09b79340b58bede7fc0e96449",
					},
				],
				list: [{
					name: '日记'
				}, {
					name: '话题'
				}, {
					name: '人',
				}],
				recommendList: [{
						name: "推荐"
					},
					{
						name: "最新"
					},
					{
						name: "关注"
					}
				],
				activeStyle: {
					fontSize: "32rpx",
					color: "#000000"
				},
				current: 0,
				recommendCurrent: 0
			};
		},
		methods: {
			change(index) {
				this.current = index;
			},
			recommendChange(index) {
				this.recommendCurrent = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.searchWarp {
		.search {
			padding: 0 32rpx;
		}

		.searchContent {
			.seachTag {
				border-bottom: 1rpx solid #C0C0C0;
			}
		}

		.recommend {
			padding-bottom: 20rpx;

			.recommendTabs {
				width: 260rpx;
			}
		}

		.fabu {
			position: fixed;
			top: 1000rpx;
			right: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 120rpx;
			height: 120rpx;
			background-color: #2A6CAB;
			border-radius: 50%;

			.fabuImg {
				image {
					width: 52rpx;
					height: 52rpx;
				}
			}

			.fabuTitle {
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
	.recommendContent{
		padding: 0rpx 34rpx;
	}
	// 话题盒子样式
	.gambitContainer{
		.gambitItem{
			padding: 32rpx;
			border-bottom: 1rpx solid #f0f0f0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.itemLeft{
				display: flex;
				align-items: center;
				.itemTag{
					width: 56rpx;
					height: 56rpx;
					background-color: #255584;
					border-radius: 50%;
					color: #fff;
					text-align: center;
					line-height: 56rpx;
					margin-right: 20rpx;
				}
				.itemTitle{
					color: #245484;
					font-size: 32rpx;
				}
			}
			.itemRight{
				font-size: 28rpx;
				font-weight: bold;
			}
		}
		
	}
// 人盒子样式
.personContainer{
	.personItem{
		border-bottom: 1rpx solid #f0f0f0;
		display: flex;
		align-items: center;
		padding: 32rpx;
		.itemAvatar{
			margin-right: 28rpx;
			image{
				width: 80rpx;
				height: 80rpx;
			}
		}
		.personInfo{
			.personlName{
				font-weight: bold;
			}
			.personlGz{
				font-size: 24rpx;
				color: rgba(16, 16, 16, 54);
			}
		}
	}
}
</style>
